<template>
    <div class="components_edit_modal chang_course">
        <el-dialog width="1000px" :title="changeCourseTitle" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <div class="dialog_con clearfix">
                <el-row>
                    <el-col :span="12">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix"><span>变更前的信息</span></div>
                            <el-form ref="oldCourse" :model="course" :rules="rules">

                                <el-form-item label="上课教师" class="lineblock">
                                    <p>{{oldUserName}}</p>
                                </el-form-item>
                                <el-form-item label="选择周次" class="lineblock" prop="oldTeachWeek">
                                    <el-select v-model="course.oldTeachWeek" multiple clearable size="mini" placeholder="请选择" @change="changeOptionsTeachWeek">
                                        <el-option
                                          v-for="item in options.oldteachWeek"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value"
                                          :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="选择星期" class="lineblock" prop="oldWeek">
                                    <el-select v-model="course.oldWeek" clearable size="mini" placeholder="请选择星期">
                                        <el-option
                                          v-for="item in options.week"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="选择节次" class="lineblock" prop="oldSection">
                                    <el-select v-model="course.oldSection" clearable size="mini" multiple  placeholder="请选择">
                                        <el-option
                                          v-for="item in options.section"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="上课地点" class="lineblock" prop="oldTeachPlace">
                                    <el-input v-model="course.oldTeachPlace"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix"><span>变更后的信息</span></div>
                            <el-form ref="newCourse" :model="course" :rules="rules">
                                <el-form-item label="上课教师" class="lineblock" prop="userId">
                                    <el-select v-model="course.userId" clearable filterable placeholder="请选择">
                                        <el-option
                                          v-for="item in options.users"
                                          :key="item.id"
                                          :label="item.name"
                                          :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="选择周次" class="lineblock" prop="teachWeek">
                                    <el-select v-model="course.teachWeek" multiple clearable size="mini" placeholder="请选择">
                                        <el-option
                                          v-for="item in options.teachWeek"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value"
                                          :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="选择星期" class="lineblock" prop="week">
                                    <el-select v-model="course.week" clearable size="mini" placeholder="请选择星期">
                                        <el-option
                                          v-for="item in options.week"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="选择节次" class="lineblock" prop="section">
                                    <el-select v-model="course.section" clearable size="mini" multiple  placeholder="请选择">
                                        <el-option
                                          v-for="item in options.section"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="上课地点" class="lineblock" prop="teachPlace">
                                    <el-input v-model="course.teachPlace"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </el-col>

                </el-row>
                <div>
                    <!-- <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="活动名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-form> -->
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary"
                @click="changCourse('oldCourse','newCourse')"
                v-loading.fullscreen.lock="fullscreenLoading"
                size="small">确 定</el-button>
                <el-button @click="state = false" size="small">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    import {config} from '@/config'
    export default {
        components: {
        },
        data() {
            return {
                state: false,
                fullscreenLoading: false,    //  loading
                syllabusList:[],
                baseId:null,
                oldUserName:'',
                changeCourseTitle:'',
                oldTeachWeek:[],
                teachWeek:[],
                course:{
                    baseId:'',
                    professionID:'',
                    courseNo:'',
                    grade:'',
                    userId:'',
                    teachWeek:'',
                    week:'',
                    section:'',
                    teachPlace:'',
                    oldUserId:'',
                    oldTeachWeek:'',
                    oldWeek:'',
                    oldSection:'',
                    oldTeachPlace:''
                },
                rules:{
                    userId: [
                            { required: true, message: '上课教师不能为空', trigger: 'blur'}
                        ],
                    oldTeachWeek: [
                            { required: true, message: '教学周不能为空', trigger: 'blur'}
                        ],
                    week: [
                            { required: true, message: '星期不能为空', trigger: 'blur'}
                        ],
                    section: [
                            { required: true, message: '节次不能为空', trigger: 'blur'}
                        ],
                    teachPlace: [
                            { required: true, message: '教学地点不能为空', trigger: 'blur'}
                        ],
                    teachWeek: [
                            { required: true, message: '教学周不能为空', trigger: 'blur'}
                        ],
                    oldWeek: [
                            { required: true, message: '星期不能为空', trigger: 'blur'}
                        ],
                    oldSection: [
                            { required: true, message: '节次不能为空', trigger: 'blur'}
                        ],
                    /*oldTeachPlace: [
                            { required: true, message: '教学地点不能为空', trigger: 'blur'}
                        ]*/
                },
                options: {
                    oldteachWeek:[],
                    teachWeek:[],
                    users:[{
                          value: '1',
                          label: '陈钊'
                        },{
                          value: '2',
                          label: '江兆付'
                        }],
                    week:[{
                          value: '1',
                          label: '周一'
                        }, {
                          value: '2',
                          label: '周二'
                        }, {
                          value: '3',
                          label: '周三'
                        }, {
                          value: '4',
                          label: '周四'
                        }, {
                          value: '5',
                          label: '周五'
                        }, {
                          value: '6',
                          label: '周六'
                        }, {
                          value: '7',
                          label: '周日'
                        }],
                    section:[{
                            value: '1',
                            label: '第一节'
                        },{
                            value: '2',
                            label: '第二节'
                        },{
                            value: '3',
                            label: '第三节'
                        },{
                            value: '4',
                            label: '第四节'
                        },{
                            value: '5',
                            label: '第五节'
                        },{
                            value: '6',
                            label: '第六节'
                        },{
                            value: '7',
                            label: '第七节'
                        },{
                            value: '8',
                            label: '第八节'
                        },{
                            value: '9',
                            label: '第九节'
                        },{
                            value: '10',
                            label: '第十节'
                        }]
                }
            };
        },
        created() {
            // this.getSyllabusList();
        },
        mounted() {},
        watch: {},
        methods: {
            // 打开模态框
            showDialog(val){
                // 清空表单提示
                if(this.$refs['oldCourse']!==undefined && this.$refs['newCourse']!==undefined ){
                    this.$refs['oldCourse'].resetFields();
                    this.$refs['newCourse'].resetFields();
                }
                // console.log("携带信息");
                // console.log(val);
                this.course.professionID = val.professionId;
                this.course.courseNo = val.courseNo;
                this.course.oldUserId = val.userId;
                this.course.userId = val.userId;
                this.course.grade = val.grade;
                this.oldUserName = val.userName;
                this.semester = val.semester;
                this.baseId = val.id;
                this.changeCourseTitle = val.professionName +" - "+ val.courseName;


                this.getAllTeacher();
                this.getAllTeacherWeek();
                this.getOldTeacherWeek();
            },
            //  获得老师信息
            getAllTeacher(){
                let self = this;
                self.axios.get(api.queryAllUserList).then((response) => {
                    if(response.data.success){
                        // console.log(response.data);
                        if(response.data.data.length > 0){
                            self.options.users = JSON.parse(JSON.stringify(response.data.data));
                            self.state = true;
                        }else{
                            // 操作失败
                            self.$message({
                                message: "还没有教师信息",
                                type:'error',
                                center: true
                            });
                        }
                    }else{
                        // 操作失败
                        self.$message({
                            message: response.data.msg,
                            type:'error',
                            center: true
                        });
                    }

                });
            },
            // 提交数据
            changCourse(formName1,formName2){
                let self = this;
                let flag = 0;
                //  修改前信息
                self.$refs[formName1].validate(valid => {
                    if (valid) {
                        flag++;
                    }else{
                        flag = 0;
                        return false;
                    }
                });
                // 修改后信息
                self.$refs[formName2].validate(valid => {
                    if (valid) {
                        flag++;
                    }else{
                        flag = 0;
                        return false;
                    }
                });
                // this..oldTeachWeek
                // 通过验证，可以提交信息了
                if(flag == 2){
                    // self.fullscreenLoading = true;
                    let self = this;
                    let submitData = _.cloneDeep(self.course);
                    submitData.baseId=self.baseId;
                    submitData.section = submitData.section.join(',');
                    submitData.oldSection = submitData.oldSection.join(',');
                    submitData.oldTeachWeek = submitData.oldTeachWeek.join(',');
                    submitData.teachWeek = submitData.teachWeek.join(',');

                    self.axios({
                        method : 'post',
                        url : api.syllabusManager.changingCourse,
                        params : submitData
                    }).then((response) => {
                        if(response.data.success){
                            // 操作失败
                            self.$message({
                                message: response.data.msg,
                                type:'success',
                                center: true
                            });
                            // console.log("调课成功了");
                            self.state = false;
                        }else{
                            // 操作失败
                            self.$message({
                                message: response.data.msg,
                                type:'error',
                                center: true
                            });
                        }
                        // self.fullscreenLoading = false;
                    });
                }
            },
            // 获取旧的教学周信息
            getOldTeacherWeek(){
                let self = this;
                // console.log("userID:"+self.course.userId+","+self.baseId)
                self.axios.get(api.syllabusManager.queryConfigTeachWeek, {
                    params: {"userId":self.course.userId,"baseId":self.baseId}
                }).then((response) => {
                    if(response.data.success){
                        if(response.data.data.length > 0){
                            self.options.oldteachWeek = JSON.parse(JSON.stringify(response.data.data));
                            _.forEach(self.options.oldteachWeek,function(item,key){
                                item.value = item.teachWeek;
                                item.label = "第"+item.teachWeek+"周";
                                item.disabled = false;
                            })
                            self.state = true;
                        }else{
                            // 操作失败
                            self.$message({
                                message: "还没有教学周信息",
                                type:'error',
                                center: true
                            });
                        }
                    }else{
                        // 操作失败
                        self.$message({
                            message: response.data.msg,
                            type:'error',
                            center: true
                        });
                    }

                });
            },
            // 获取新的教学周信息
            getAllTeacherWeek(){
                let self = this;
                // console.log("userID:"+self.course.userId+","+self.baseId)
                self.axios.get(api.schoolCalendar.getWeek+'/'+self.course.professionID, {
                    params: {
                        "grade":self.course.grade,
                        "semester":self.semester
                    }
                }).then((response) => {
                    if(response.data.success){
                        if(response.data.data.length > 0){
                            self.options.teachWeek = JSON.parse(JSON.stringify(response.data.data));
                            _.forEach(self.options.teachWeek,function(item,key){
                                item.value = item.week;
                                item.label = "第"+item.week+"周";
                                item.disabled = false;
                            })
                            self.state = true;
                        }else{
                            // 操作失败
                            self.$message({
                                message: "还没有教学周信息",
                                type:'error',
                                center: true
                            });
                        }
                    }else{
                        // 操作失败
                        self.$message({
                            message: response.data.msg,
                            type:'error',
                            center: true
                        });
                    }

                });
            },
            // 下拉菜单选项
            changeOptionsTeachWeek(arr){
                /*_.forEach(this.options.teachWeek,function(item,key){
                    item.disabled = false;
                })

                for (var i = 0; i < arr.length; i++) {
                    for (var j = 0; j < this.options.teachWeek.length; j++) {
                        if(this.options.teachWeek[j].value < arr[i]){
                            this.options.teachWeek[j].disabled = true;
                        }
                    }
                };*/
            }

        },
    };
</script>
<style>

</style>